<style>
	.pagetitle { width: 100%; text-align: center; color: darkorange; text-shadow: 1px 1px 5px #999;}
	.item { width: 60px; font-size: 14px; font-weight: 600; color: #666666; cursor: pointer;  }
	.item:hover { color: red;}
	.item.choosed { color: darkorange;}
	
	.days.line { width: 100%; height: 70px; border-bottom: 1px solid #cccccc; border-top: 1px solid #cccccc; justify-content: space-around;}
	.day.item { width: 120px; text-align: center;}
	.zhibos.line{ width: 100%; line-height: 32px; flex-wrap: wrap; padding-left: 20px;}
	.disabled { color: #999999}
	.setdate { color: #00008B; cursor: pointer; font-weight: bold; font-size: 20px;}

	.zhibo.item { width: 300px;}
	#zhibo_chart { width: 90%; height: 400px; padding-left: 5%; margin-top: 30px;}
</style>
<section>
	<div id="vm">
		<h3 class="pagetitle">直播课学员在线人数</h3>
		<div class="days line">
			<div class="setdate" @click="setdate(-30)" title="前一月"><<</div><div class="setdate"  @click="setdate(-7)" title="前一周"><</div>
			<div class="day item" v-for="(item, i) in days" :class="i == day ? 'choosed' : ''" @click="day = i; getzhibos()">
				<div>{{item}}</div>
				<div>{{weeks[i]}}</div>
			</div>
			<div class="setdate"  @click="setdate(7)" title="后一周">></div><div class="setdate"  @click="setdate(30)" title="后一月">>></div>
		</div>
		<div class="zhibos line">
			<div class="zhibo item "v-for="(item, i) in zhibo_list" :class="i==zhibo?'choosed':''" @click="zhibo = i; showchart()">
				{{item.start_time.split(" ")[1]}}    {{item.name}} </div>
		</div>
		<hr style="margin: 0 0 40px 0;" />
		<h4 class="pagetitle" v-if="zhibo_list.length > 0">{{zhibo_list[zhibo].name}} -- {{zhibo_list[zhibo].coach}} ({{zhibo_list[zhibo].start_time.split(" ")[1]}}-{{zhibo_list[zhibo].end_time.split(" ")[1]}})</h4>
		<div id="zhibo_chart"></div>
	</div>
</section>
<script>
	var vm = new Vue({
		el: "#vm",
		data: {
			days: [],
			weeks: [],
			day: 6,
			curday: 0, // 当前显示的7天中的最后一天标识。当day=6时正好指向这一天。curday 只能是负数和0;
			zhibo_list: [],
			zhibo: 0,
			users:[],			// 每一分钟在线人数   []
			getdatas: {
				zhibos: "SELECT c.uuid, c.coach, r.`name`, c.start_time, c.end_time \
					from live_class c \
					inner join live_course r on c.course_id = r.id \
					where date_format(c.start_time, '%Y-%m-%d') = '$date' order by c.start_time",
				start_times: "select DATE_FORMAT(e.start_time, '%H:%i') m, count(*) c \
					from user_live_class_record e \
					where e.class_uuid = '$uuid' \
					group by m",
				end_times: "select DATE_FORMAT(e.end_time, '%H:%i') m, count(*) c \
					from user_live_class_record e \
					where e.class_uuid = '$uuid' and e.end_time is not null \
					group by m",
			}
		},
		methods: {
			
			showdays: function(){
				// this.firstday += d;
				// if (this.firstday > 0) this.firstday = 0; 
				// if (d == 0) this.firstday = 0; 
				this.days = []
				this.weeks = []
				for (let i = 0; i < 7; i ++){
					this.days.push(rd.dateAdd(new Date(), i + this.curday - 7))
				}
				for (let i = 0; i < 7; i ++){
					this.weeks.push(this.showWeek(this.days[i]))
				}
				this.getzhibos()
			},
			setdate: function(d){
				this.curday += d;
				this.curday = Math.min(this.curday, 0);
				this.showdays();
			},
			showWeek: function(d){
				let week = "日一二三四五六";
				if(rd.dateAdd(new Date(d), 0) == rd.dateAdd(new Date(), 0)){
					return '今天'
				}else{
					return '星期' + week[new Date(d).getDay()]
				}
			},			
			getzhibos: function(){
				
				let that = this;
				this.zhibo = 0;
				// this.day = rd.dateAdd(new Date(), this.zhibo + this.firstday * 7)
				post(this.getdatas['zhibos'].replace(/\$date/g, this.days[this.day]), function(r){
					// console.log('zhobos:', r)
					that.zhibo_list = r
					that.showchart()
				})
			},
			
			showchart: function(){
				let that = this;
				// 通过课程开始和结束时间，求得时段内每一分钟名称，表现为00:00形式。一位数的时与分前置补0.
				this.users = [];
				let t = new Date(this.zhibo_list[this.zhibo].start_time).getTime() - 300000;
				while(t <= new Date(this.zhibo_list[this.zhibo].end_time).getTime() + 120000){
					let ti = new Date(t)
					let tn = (ti.getHours() < 10 ? '0':'') + ti.getHours() + ':' + (ti.getMinutes() < 10 ? '0' : "" ) + ti.getMinutes();
					this.users.push({name:tn, add: 0, sub: 0, remain: null}) // 构建空的users数组，每个元素4项，第0项为时间，第1项为新增，第2项为减少，第3项为现存
					t += 60000;
				}
				console.log(this.users)
				post(that.getdatas["start_times"].replace(/\$uuid/g, that.zhibo_list[that.zhibo].uuid), function(r){
					// 取上线学员在每一分钟的求和
					// console.log("starttime: ", r)
					for(i in r){
						x = r[i]
						if(x.m < that.users[0].name) {// usrs，第0元素即开课时间点。每个元素的4个部分为【时间，上线，下线，现存】
							that.users[0].remain += Number(x.c)
						}else{
							for(u in that.users){
								if(that.users[u].name == x.m) {
									that.users[u].add = Number(x.c)
								}
							}
						}
					}
					post(that.getdatas["end_times"].replace(/\$uuid/g, that.zhibo_list[that.zhibo].uuid), function(r){
						// console.log("endtime: ", r)
						// 取下线学员在每一分钟的求和
						for(i in r){
							for(u in that.users){
								if(that.users[u].name == r[i].m) that.users[u].sub = Number(r[i].c)
							}
						}
						// 循环users，按第1项上线学员数 和 第2项下线学员数，累加累减求第3项在线学员数的值
						for(let i = 0; i < that.users.length && new Date(that.day + " " + that.users[i].name) < new Date(); i ++){
							x = that.users[i]
							
							if(i == 0){  // 课程起始时间，之前已加好在上课之前进来的学员，现在加上在第一分钟进来的学员
								x.remain += x.add
							}else{		// 以后每一分钟的在线，是前一分钟的在线，加这一分钟上线，减这一分钟下线
								x.remain = that.users[i-1].remain
								x.remain += Number(x.add)
								x.remain -= Number(x.sub)
							}
						}
						
						console.log(that.users)
						// 构建线形图
						let opt = rd.chart_option.createNew();
						opt.add_series([{name: '上线', type: 'bar'}, {name: '下线', type: 'bar'}, {name: '在线', type: 'line'}]);
						opt.option.xAxis[0].name = "分钟";
						opt.option.yAxis[0].name = "人数";
						opt.extend({
							xAxis: [
								{name: "分钟"}
							],
							yAxis: [
								{name: "上线下线人数"},
								{name: "在线人数"},
							],
							series: [
								{},
								{},
								{yAxisIndex: 1},
							]
						})
						opt.fill_data(that.users, 'name', ['add', 'sub', 'remain']);
						let chart = echarts.init(document.getElementById("zhibo_chart"));
						// console.log(opt.option);
						chart.setOption(opt.option);
						// setTimeout(that.showchart, 10000);
						
					})
				})
				
			}
		},

		mounted: function(){
			this.showdays()
			
		}
	})
</script>